<template>
  <div class="queryProducts">
    <div class="productsInfo">
      <Tree :data="data5" :render="renderContent" class="demo-tree-render"></Tree>
    </div>
    <Modal v-model="removeFlag" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>删除提醒</span>
        </p>
        <div style="text-align:center">
            <p>您真的要删除这条菜单吗?</p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="modal_loading" @click="del">删除</Button>
        </div>
      </Modal>
    <div class="add_banner">
      <Modal
        v-model="show"
        :title="isAdd?'添加权限':'修改权限'"
        @on-ok="modalSubmit"
        @on-cancel="show=false">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="id" prop="id" v-if="formValidate.id">
              <Input v-model="formValidate.id" placeholder="id" disabled></Input>
          </FormItem>
          <FormItem label="角色ID" prop="rID">
              <Select
                v-model="formValidate.rID"
                filterable
                :remote-method="remoteMethod1"
                :loading="loading1">
                <Option v-for="item in roleList" :value="item.r_id" :key="item.r_id">{{ item.r_name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="菜单ID" prop="mId">
              <Select 
                v-model="formValidate.mId"
                filterable
                :remote-method="remoteMethod2"
                :loading="loading2">
                <Option v-for="item in menusList" :value="item.m_Id" :key="item.m_Id">{{ item.text }}</Option>
            </Select>
          </FormItem>
          <FormItem v-if="formValidate.time" label="创建时间" prop="status">
              <Input v-model="formValidate.time" disabled></Input>
          </FormItem>
      </Form>
    </Modal>
    </div>
  </div>
</template>

<script>
import conf from '@/api/apiConf'
export default {
  data(){
    return {
       modal_loading:false,
       loading1:false,
       loading2:false,
       show:false,
       isAdd:false,
       removeFlag:false,
       removeData:{},
       formValidate: {
         rID: '',
         mId: '',
       },
       ruleValidate: {
           rID: [
               { required: true, message: '角色不能为空', trigger: 'blur' }
           ],
           mId: [
               { required: true, message: '菜单不能为空', trigger: 'blur' }
           ],
       },
       roleList:[],
       menusList:[],
       data5: [
             {
                 title: 'mogu admin menus',
                 expand: true,
                 render: (h, { root, node, data }) => {
                     return h('span', {
                         style: {
                             display: 'inline-block',
                             width: '100%'
                         }
                     }, [
                         h('span', [
                             h('Icon', {
                                 props: {
                                     type: 'ios-folder-outline'
                                 },
                                 style: {
                                     marginRight: '8px'
                                 }
                             }),
                             h('span', data.title)
                         ]),
                         h('span', {
                             style: {
                                 display: 'inline-block',
                                 float: 'right',
                                 marginRight: '32px'
                             }
                         }, [
                           
                         ])
                     ]);
                 },
                 children: []
             }
       ],
       buttonProps: {
          type: 'success',
          size: 'small',
       }
     }
  },
  watch:{
    data5:{
        deep:true,
        handler:()=>{

        }
    }
  },
  created() {
    this.search()
  },
  methods: {
    renderContent (h, { root, node, data }) {
        return h('span', {
            style: {
                display: 'inline-block',
                width: '100%'
            }
        }, [
            h('span', [
                h('Icon', {
                    props: {
                        type: data.type
                    },
                    style: {
                        marginRight: '8px'
                    }
                }),
                h('span', data.title)
            ]),
            h('span', {
                style: {
                    display: 'inline-block',
                    float: 'right',
                    marginRight: '32px'
                }
            }, [
                h('Button', {
                      props: Object.assign({}, this.buttonProps, {
                          icon: 'ios-add',
                          disabled:data.addDisabled
                      }),
                      style: {
                          marginRight: '8px'
                      },
                      on: {
                          click: () => {
                            this.formValidate.rID=data.r_id
                            console.log(data);
                            this.addBanner()
                           }
                      }
                  }),
                h('Button', {
                    props: Object.assign({}, this.buttonProps, {
                        icon: 'md-create',
                        disabled:data.fixDisabled,
                        type:'primary'
                    }),
                    style: {
                        marginRight: '8px'
                    },
                    on: {
                        click:()=>{
                          this.fixTable(data)
                        }
                      }
                }),
                h('Button', {
                    props: Object.assign({}, this.buttonProps, {
                        icon: 'ios-remove',
                        disabled:data.removeDisabled,
                        type:'error'
                    }),
                    on: {
                        click:()=>{
                          this.removeFlag = true
                            this.removeData={
                                root,
                                node,
                                data
                            }
                        }
                      }
                }), 
            ])
        ]);
    },
    async del () {
      this.modal_loading = true;
      const { data } = await this.$http.post(conf.deletePower,{spid:this.removeData.data.sp_id});
        if(data.status==200){
          this.$Message.info('删除成功')
          this.search()
        }else{
            this.$Message.info('删除失败')
        }
      this.modal_loading = false;
      this.removeFlag = false;
    },
    remoteMethod1(){
      this.loading1 = true;
      this.$http.get(conf.GetAllRole).then(res=>{
         this.loading1 = false;
         if(res.data.status==-200){
           this.$Message.info('获取数据失败')
         }
         if(res.data.status==200){
           this.roleList=res.data.data
         }
      })
    },
    remoteMethod2(){
      this.loading2 = true;
      this.$http.get(conf.getPowerMenus).then(res=>{
        this.loading2 = false;
        if(res.data.status==-200){
          this.$Message.info('获取数据失败')
        }
        if(res.data.status==200){
          this.menusList=res.data.data
        }
      })
    },
    addBanner(){
      this.isAdd=true
      this.show=true
    },
   async modalSubmit(){ 
      if(this.detectKey()) return
      let apiUrl='',params=this.formValidate
      if(this.isAdd){
        apiUrl=conf.addPower
      }else{
        apiUrl=conf.UpdatePower
      }
      let res= await this.$http.post(apiUrl, params)
       if(res.data.status==200){
         this.$Message.info('操作成功')
         this.clearKey(this.searchForm)
         this.search()
       }else{
         this.$Message.info('操作失败')
       }
    },
    fixTable (row) {
      this.formValidate={
        id:row.sp_id,
        rID:row.r_id,
        mId:row.m_id,
        time:row.sp_time,
      }
      this.isAdd=false
      this.show=true
    },
    async search(){
      let res= await this.$http.get(conf.GetPower)
       if(res.data.status==-200){
         this.$Message.info('获取数据失败')
       }
       if(res.data.status==200){
         this.data5[0].children=res.data.data
       }
    },
    clearKey(obj){
      for (const key in obj) {
        if (Object.hasOwnProperty.call(obj, key)) {
          obj[key]='';
        }
      }
    },
    detectKey(){
      let tipKey='';
      for (const key in this.formValidate) {
        if (Object.hasOwnProperty.call(this.formValidate, key)) {
          if(!this.formValidate[key]) tipKey=key
        }
      }
      switch (tipKey) {
        case 'rID':
          tipKey='角色不能为空'
          break;
        case 'mId':
          tipKey='菜单不能为空'
          break;
      }
      if(tipKey){
        this.$Message.info(tipKey)
        return true
      } 
      return false
    }
  },
}
</script>

<style lang="less" scoped>
.queryProducts {
  width: 100%;
  padding: 10px;
  .admin_img_top{
    width: 100%;
    .search_content{
      width: 100%;
      .search_item{
        width: 240px;
        display: inline-block;
        margin-right: 20px;
        margin-bottom: 20px;
        text-align: left;
        span{
          width: 80px;
          text-align: end;
        }
        /deep/.ivu-input-wrapper{
          width: 160px;
        }
      }
    }
    .admin_top_handle{
      display: block;
    }
  }
}

</style>
